<template>
	<view>
		<view class="header posRel">
			<image class="samePar posAbso ltzero" src="../../../static/images/xlcp/cpReport.png"></image>
		</view>
		<view class="wrap padd">
			<!-- 用户信息 -->
			<view class="cpUserInfo" v-if="reportInfo != undefined && reportInfo != ''">
				<view class="cpTit ellip">{{reportInfo.basicList.title}}</view>
				<view class="cpDetItem">
					<view class="useTime">
						<view>总用时:{{reportInfo.resultList.totalUseSecond}}秒</view>
						<view class="lineView"></view>
						<view>平均用时:{{reportInfo.resultList.avgUseSecond}}秒</view>
					</view>
					<view class="logNo">编号:{{reportInfo.basicList.logNo}}</view>
				</view>
				<view class="userInfo clearfix">
					<view class="userInfoItem">姓名:{{reportInfo.basicList.userName}}</view>
					<view class="userInfoItem">性别:{{reportInfo.basicList.userSex}}</view>
					<view class="userInfoItem">年龄:{{reportInfo.basicList.userAge}}</view>
					<view class="userInfoItem">时间:{{reportInfo.basicList.csTime}}</view>
					<view class="userInfoItem">职业:{{reportInfo.basicList.userWork}}</view>
				</view>
				<view class="scoreCon" v-if="reportInfo.resultList.totalScore > 0 || reportInfo.resultList.avgScore > 0 || reportInfo.resultList.elementANum > 0 || reportInfo.resultList.elementBNum > 0">
					<view class="scoreItem spaceBet">
						<view class="innerScore">总均分</view>
						<view class="innerScore">阳性项目数</view>
						<view class="innerScore">阴性项目数</view>
					</view>
					<view class="scoreItem spaceBet">
						<view class="innerScore specCol">{{reportInfo.resultList.avgScore}}</view>
						<view class="innerScore specCol">{{reportInfo.resultList.elementANum}}</view>
						<view class="innerScore specCol">{{reportInfo.resultList.elementBNum}}</view>
					</view>
					<view class="cpTotalScore spaceBet">
						<view>测试总分</view>
						<view class="score">{{reportInfo.resultList.totalScore}}<text class="unit">分</text></view>
					</view>
				</view>
			</view>
			<!-- 测试因素分析 -->
			<view class="modItem" v-if="echartsList != ''">
				<view class="modTit hasFlex">
					<view class="iconfont icon-zhijiao-triangle"></view>
					<view>测评因素分析</view>
				</view>
				<view class="cpEchart">
					<view class="innerEchart">
						<view class="innerTit">
							<view class="echartItem tit">因子</view>
							<view class="echartItem tit">常模</view>
							<view class="echartItem tit">得分</view>
						</view>
						<view class="echartListWrap">
							<view class="echartList spaceBet"
								v-for="(item,index) in echartsList[0].myScoreData"
								:key="index"
							>
								<view class="echartItem">{{echartsList[0].xData[index]}}</view>
								<view class="echartItem changmo">{{echartsList[0].cmScoreNormal[index]}}±{{echartsList[0].cmScoreAboveData[index]}}</view>
								<view class="echartItem score">{{item}}<text class="iconfont icon-xiangshang" v-if="calcThanFun(item,echartsList[0].cmScoreNormal[index],echartsList[0].cmScoreAboveData[index])"></text></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 测试评语 -->
			<view class="modItem hasPaddBot" v-if="totalResult != '' || totalSuggest != ''">
				<view class="modTit hasFlex">
					<view class="iconfont icon-zhijiao-triangle"></view>
					<view>测试评语</view>
				</view> 
				<view class="modCon">
					<view class="modConItem" v-if="totalResult != ''">
						<view class="conTit">结果:</view>
						<jyf-parser :html="totalResult" :tag-style="tagStyle" :selectable="true"></jyf-parser>
					</view>
					<view class="modConItem" v-if="totalSuggest != ''">
						<view class="conTit">建议:</view>
						<jyf-parser :html="totalSuggest" :tag-style="tagStyle" :selectable="true"></jyf-parser>
					</view>
				</view>
			</view>
			<!-- 因子说明 -->
			<view class="modItem" v-if="elementList != ''">
				<view class="modTit hasFlex">
					<view class="iconfont icon-zhijiao-triangle"></view>
					<view>因子说明</view>
				</view>
				<view class="modCon">
					<view class="conItem"
						v-for="(item,index) in elementList"
						:key="index"
					>
						<view class="conItemName">
							<view class="leftItem hasFlex">
								<view class="circle"><view class="innerCir"></view></view>
								<view class="name">{{item.elementName}}</view>
							</view>
							<view class="itemScore">{{item.myScore}}<text class="unit">分</text></view>
						</view>
						<view class="modConItem">
							<view class="conTit">结果:</view>
							<view>
								<jyf-parser :html="item.sysResult" :tag-style="tagStyle" :selectable="true"></jyf-parser>
							</view>
							<!-- <view>{{item.sysResult}}</view> -->
						</view>
						<view class="modConItem">
							<view class="conTit">建议:</view>
							<view>
								<jyf-parser :html="item.sysSuggest" :tag-style="tagStyle" :selectable="true"></jyf-parser>
							</view>
							<!-- <view>{{item.sysSuggest}}</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 测评原始数据 -->
			<view class="modItem">
				<view class="modTit hasFlex">
					<view class="iconfont icon-zhijiao-triangle"></view>
					<view>测评原始数据</view>
				</view>
				<view class="modCon specCol spaceBet" @tap="goViewReocrd">
					<view>查看答题数据(原始答案及答题时间)</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
			<view class="note">声明:本报告仅对被测试者填写的答案选项有效,不同环境下可能测评结果不同,仅供参考</view>
		</view>
	</view>
</template>

<script>
	import { getXlcsReport,getXlcsLogRecordList } from '@/api/index/index'
	export default {
		data(){
			return{
				proNavTit:'',//自定义导航标题
				isHasIconR:false,//自定义导航是否含有右侧图标
				otherBgFlag:true,
				otherBgCls:'transparentBg',
				isFixedFlag:false,
				logId:'',
				reportInfo:[],
				echartsList:[],
				elementList:[],
				tagStyle: {
					p: 'font-size:18px'+
						'px;font-weight:400;margin-bottom:25px;text-align:justify;word-break:normal;word-wrap:break-word;/* background-color:transparent!important; */color:#333333',
					section: 'font-size:18px'+
						'px;font-weight:400;',
					img: 'max-width:100%!important;height:auto!important;margin:8px auto!important;display:block!important'
				},
				fromPage:'',
				totalResult:'',
				totalSuggest:''
			}
		},
		computed:{
			calcThanFun(){
				return function(realScore,cmScore,cmScoreAbove){
					var thanFlag = false;
					if(Number( realScore ) > (Number( cmScore ) + Number( cmScoreAbove ))){
						thanFlag = true;
					}
					return thanFlag;
				}
			}
		},
		onLoad(options){
			/*
				cpDetPage->测评详情 
				myCpRec 测评订单&干预测评
				gyDetInit&gyDetTest 干预详情查看测评报告(初始 第x次试测)
			*/
			this.fromPage = options.fromPage;
			this.logId = options.logId;
			this.loadCpReport();
			this.loadCpRecordList();
		},
		onUnload(){
			uni.removeStorageSync('recordList');
			uni.removeStorageSync('userCpInfo');
			if(this.fromPage == 'cpDetPage'){
				wx.disableAlertBeforeUnload();
				this.commBackFun();
			}
		},
		methods:{
			commBackFun(){
				var delta = 0;
				if(this.fromPage == 'cpDetPage'){
					delta = 2;
					let pages = getCurrentPages();
					let prevPage = pages[pages.length - 4];
					prevPage.$vm.isRefreshFlag = true;
				}else{
					delta:1
				}
				uni.navigateBack({
					delta
				})
			},
			loadCpReport(){
				var field = { logId:this.logId };
				let url = '';
				if(this.fromPage == 'gyDetTest'){
					url = '/xlcs/getZzRepeatXlcsReport'
				}else{
					url = '/xlcs/getXlcsReport';
				}
				getXlcsReport(field,url).then(res=>{
					//console.log(res)
					this.reportInfo = res.data.datas;
					this.totalResult = res.data.datas.resultList.totalResult;
					this.totalSuggest = res.data.datas.resultList.totalSuggest;
					this.echartsList = res.data.datas.echartsList;
					this.elementList = res.data.datas.elementList;
					setTimeout(()=>{
						uni.setNavigationBarTitle({
							title:this.reportInfo.basicList.title + '测评报告'
						})
					},100)
				}).catch(err=>{
					console.log(err)
				});
			},
			loadCpRecordList(){
				var field = { logId:this.logId };
				let url = '';
				if(this.fromPage == 'gyDetTest'){
					url = '/xlcs/getZzRepeatXlcsDetailList'
				}else{
					url = '/xlcs/getXlcsLogDetailRecordList';
				}
				getXlcsLogRecordList(field,url).then(res=>{
					//console.log(res)
					var tmpObj = res.data.datas;
					for(let i in tmpObj.queList){
						tmpObj.queList[i].labelTitle = tmpObj.queList[i].labelTitle.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, p1)=>{
						   return `<img src='${this.gzcpUrl + '/' + p1}' />`
						})
						if(tmpObj.queList[i].labelTitle.indexOf('<p>') != -1){
							tmpObj.queList[i].htmlFlag = true;
						}else{
							tmpObj.queList[i].htmlFlag = false;
						}
					} 
					uni.setStorageSync('recordList',tmpObj);
				}).catch(err=>{
					console.log(err)
				});
			},
			goViewReocrd(){
				uni.navigateTo({
					url:'/pages/subIndex/cpRecord/cpRecord'
				})
			},
			backPage(){
				this.commBackFun();
			}
		}
	}
</script>

<style lang='scss'>
	.wrap{
		padding-bottom: 20rpx;
	}
	.note{
		color: $pss-color-red;
		font-size: 24rpx;
		margin:-15rpx 0 30rpx 0;
	}
	.scoreCon{
		border: 1rpx solid #feedcf;
		border-radius: 20rpx;
		.scoreItem{
			height: 76rpx;
			border-bottom: 1rpx solid  #feedcf;
			.innerScore{
				width: 33.3%;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				font-size: 30rpx;
				color: $pss-text-color3;
				border-right:  1rpx solid  #feedcf;
				&.specCol{
					font-weight: bold;
					font-size: 32rpx;
					color: $pss-color-primary_1;
				}
				&:nth-of-type(3n){
					border-right: none;
				}
			}
			&:last-child{
				border-bottom: none;
			}
		}
	}
	.modItem{
		border-radius: 20rpx;
		background: #fff;
		padding:0 20rpx;
		margin-bottom: 30rpx;
		.innerEchart{
			width: 100%;
			background: #fffbf2;
			border-radius: 20rpx;
			margin-top: 20rpx;
			.echartList{
				min-height: 70rpx;
				border-bottom: 1rpx solid #fff;
				&:last-child{
					border-bottom: none;
				}
			}
			.innerTit{
				height: 70rpx;
				border-radius: 20rpx 20rpx 0 0;
				background: $pss-color-primary_1;
				display: flex;
				justify-content: space-between;
			}
			.echartItem{
				width: 33.3%;
				min-height: 70rpx;
				border-right: 1rpx solid #fff;
				text-align: center;
				font-size: 30rpx;
				color: $pss-text-color8;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;
				&.changmo{
					font-size: 32rpx;
				}
				&.score{
					color: $pss-color-primary_1;
					font-weight: bold;
				}
				&.tit{
					font-size:30rpx;
					color: #fff;
					font-weight: bold;
				}
				&:nth-of-type(3n){
					border-right: none;
				}
			}
		}
		.cpEchart{
			width: 100%;
			padding-bottom: 40rpx;
		}
		.modCon{
			padding: 15rpx 0;
			font-size: 30rpx;
			color:$pss-text-color8 ;
			.conItem{
				border-bottom: 1rpx dashed #feedcf;
				.conItemName{
					height: 80rpx;
					color: $pss-color-primary_1;
					font-size: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.leftItem{
						height: 100%;
						align-items: center;
					}
					.circle{
						width: 30rpx;
						height: 30rpx;
						border-radius: 50%;
						background: #fff4e2;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 15rpx;
					}
					.innerCir{
						width: 20rpx;
						height: 20rpx;
						background: $pss-color-primary_1;
						border-radius: 50%;
					}
					.itemScore{
						color: $pss-color-primary_1;
						font-size: 32rpx;
						.unit{
							font-size: 24rpx;
							font-weight: normal;
						}
					}
				}
				&:last-child{
					border-bottom: none;
				}
			}
			.modConItem{
				margin-bottom: 20rpx;
			}
			.conTit{
				margin-bottom: 5rpx;
			}
			&.specCol{
				color: $pss-color-primary_1;
				padding: 35rpx 0;
				font-size: 28rpx;
				align-items: center;
			}
			.icon-gengduo{
				font-size: 26rpx;
			}
		}
		.modTit{
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1rpx solid #eee;
			font-size: 32rpx;
			color: $pss-text-color3;
			font-weight: bold;
			.icon-zhijiao-triangle{
				color: $pss-color-primary_1;
				font-weight: normal;
				transform: rotateX(180deg);
				margin-right: 10rpx;
			}
		}
		&.hasPaddBot{
			padding-bottom: 40rpx;
		}
	}
	.cpTotalScore{
		padding: 0 20rpx;
		height: 86rpx;
		line-height: 86rpx;
		font-size: 30rpx;
		color: $pss-text-color3;
		border-radius: 0 0 20rpx 20rpx;
		background: #fffbf2;
		font-weight: bold;
		.score{
			color: $pss-color-primary_1;
			font-size: 32rpx;
			.unit{
				font-size: 24rpx;
				font-weight: normal;
			}
		}
	}
	.cpUserInfo{
		background: #fff;
		position: relative;
		z-index: 2;
		padding: 20rpx 20rpx 30rpx 20rpx;
		margin: -90rpx auto 0;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		.cpTit{
			font-size: 32rpx;
			color: $pss-text-color3;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.userInfo{
			margin-top: 10rpx;
			padding-bottom: 10rpx;
			.userInfoItem{
				width: 50%;
				height: 60rpx;
				float: left;
				line-height: 60rpx;
				font-size: 28rpx;
				color: $pss-text-color3;
				&:nth-of-type(2n-1){
					width: 35%;
				}
				&:nth-of-type(2n){
					width: 65%;
				}
			}
		}
		.cpDetItem{
			font-size: 24rpx;
			color: $pss-text-colora;
			border-bottom: 1rpx solid #eee;
			padding-bottom: 10rpx;
			.useTime{
				display: flex;
				align-items: center;
			}
			.lineView{
				width: 2rpx;
				height: 20rpx;
				background: $pss-text-colora;
				margin: 0 10rpx;
			}
			.logNo{
				margin-top: 10rpx;
				padding-bottom: 10rpx;
			}
		}
	}
	.header{
		width: 100%;
		height: 320rpx;
	}
	page{
		background: $pss-bg-primary;
	}
</style>